<template>
  <div style="width: 100%;height: 100%;box-sizing: border-box;">
    <div class="tabcheck">
      <div :class="isstatu == index ? 'tabsta' : 'tabone'" v-for="(item, index) in status" :key="index" @click="onstatu(item, index)">
        <span style="cursor: pointer;">{{ item.title }}</span>
      </div>
    </div>
    <div class="tatuleft" v-if="disstatus == 1">
      <div class="tatu_rig">
        <div class="Company">
          <span>币种：</span>
          <span>美元</span>
        </div>
        <div class="con_open">
          <div class="con_div">
            <!--一组-->
            <div class="con_dis_one">
              <span>当前权益：</span>
              <span>{{ parseFloat(capital.money_zong || 0).toFixed(2) }}</span>
            </div>
            <div class="con_dis_one">
              <span>可用资金：</span>
              <span>{{ parseFloat(capital.money_yes || 0).toFixed(2) }}</span>
            </div>
            <div class="con_dis_one">
              <span>保证金：</span>
              <span>{{ parseFloat(capital.deposit || 0).toFixed(2) }}</span>
            </div>
            <div class="con_dis_one">
              <span>冻结保证金：</span>
              <span>{{ parseFloat(capital.deposit || 0).toFixed(2) }}</span>
            </div>
            <div class="con_dis_one">
              <span>出入金金额：</span>
              <span>{{ parseFloat(capital.money || 0).toFixed(2) }}</span>
            </div>
          </div>
          <div class="con_div">
            <div class="con_dis_one">
              <span>可取资金：</span>
              <span>{{ parseFloat(capital.money_qu || 0).toFixed(2) }}</span>
            </div>
            <div class="con_dis_one">
              <span>持仓盈亏：</span>
              <span>{{ parseFloat(capital.order_out || 0).toFixed(2) }}</span>
            </div>

            <div class="con_dis_one">
              <span>风险率：</span>
              <span>{{ capital.riskrate || 0 }}</span>
            </div>
            <div class="con_dis_one">
              <span>冻结手续费：</span>
              <span>{{ parseFloat(capital.service_fee_no || 0).toFixed(2) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tatuleft" v-if="disstatus == 2">
      <div class="tatu_le">
        <div class="chadiv">
          <span class="cha_tit" style="color: #000000;">开始日期</span>
          <input class="cha_inp" v-model="time.time" type="date" />
        </div>
        <div class="chadiv">
          <span class="cha_tit" style="color: #000000;">结束日期</span>
          <input class="cha_inp" v-model="time.times" type="date" />
        </div>
        <button class="but_check" @click="query2()">查询</button>
      </div>
      <div class="tatu_riin">
        <div class="chi_title">结算明细</div>
        <div class="js_border">
          <div class="name_chi">
            <div class="one_name" style="width: 165px;">
              <span>|</span>
              <span>品种</span>
              <span>|</span>
            </div>
            <div class="one_name" style="width: 145px;">
              <span></span>
              <span>合约</span>
              <span>|</span>
            </div>

            <div class="one_name" style="width: 145px;">
              <span></span>
              <span>开仓日期</span>
              <span>|</span>
            </div>
            <div class="one_name">
              <span></span>
              <span>开仓价</span>
              <span>|</span>
            </div>
            <div class="one_name">
              <span></span>
              <span>买/卖</span>
              <span>|</span>
            </div>
            <div class="one_name">
              <span></span>
              <span>手数</span>
              <span>|</span>
            </div>
            <div class="one_name">
              <span></span>
              <span>平仓价</span>
              <span>|</span>
            </div>
            <div class="one_name">
              <span></span>
              <span>平仓盈亏</span>
              <span>|</span>
            </div>
            <div class="one_name">
              <span></span>
              <span>保证金金额</span>
              <span>|</span>
            </div>
            <div class="one_name">
              <span></span>
              <span>手续费</span>
              <span>|</span>
            </div>
            <div class="one_name" style="width: 145px;">
              <span></span>
              <span>成交编号</span>
              <span>|</span>
            </div>
          </div>
          <div class="name_chi1" v-for="(item, index) in settlementlist" :key="index">
            <div class="one_name1" style="width: 165px;">
              <span>|</span>
              <span>{{ item.symbol_cn }}</span>
              <span>|</span>
            </div>
            <div class="one_name1" style="width: 145px;">
              <span></span>
              <span>{{ item.code }}</span>
              <span>|</span>
            </div>
            <div class="one_name1" style="width: 145px;">
              <span></span>
              <span>{{ item.open_time }}</span>
              <span>|</span>
            </div>
            <div class="one_name1">
              <span></span>
              <span>{{ parseFloat(item.open_price) }}</span>
              <span>|</span>
            </div>
            <div class="one_name1">
              <span></span>
              <span>{{ item.rise_fall == 'RISE' ? '买' : '卖' }}</span>
              <span>|</span>
            </div>
            <div class="one_name1">
              <span></span>
              <span>{{ parseFloat(item.volume || 0).toFixed(0) }}</span>
              <span>|</span>
            </div>
            <div class="one_name1">
              <span></span>
              <span>{{ parseFloat(item.close_price || 0) }}</span>
              <span>|</span>
            </div>
            <div class="one_name1">
              <span></span>
              <span>{{ parseFloat(item.profit || 0).toFixed(2) }}</span>
              <span>|</span>
            </div>
            <div class="one_name1">
              <span></span>
              <span>{{ parseFloat(item.deposit || 0).toFixed(2) }}</span>
              <span>|</span>
            </div>
            <div class="one_name1">
              <span></span>
              <span>{{ parseFloat(item.service_fee || 0).toFixed(2) }}</span>
              <span>|</span>
            </div>
            <div class="one_name1" style="width: 145px;">
              <span></span>
              <span>{{ item.order_number }}</span>
              <span>|</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tatuleft" v-if="disstatus == 3">
      <div class="tatu_rig">
        <div class="chi_title">持仓明细</div>
        <div class="name_chi">
          <div class="one_name">
            <span>|</span>
            <span>品种</span>
            <span>|</span>
          </div>
          <div class="one_name" style="width: 8rem;">
            <span></span>
            <span>合约</span>
            <span>|</span>
          </div>
          <div class="one_name" style="width: 10rem;">
            <span></span>
            <span>开仓日期</span>
            <span>|</span>
          </div>
          <div class="one_name">
            <span></span>
            <span>手数</span>
            <span>|</span>
          </div>
          <div class="one_name">
            <span></span>
            <span>买/卖</span>
            <span>|</span>
          </div>
          <!-- <div class="one_name">
              <span></span>
              <span>持仓量</span>
              <span>|</span>
            </div> -->
          <div class="one_name">
            <span></span>
            <span>开仓价</span>
            <span>|</span>
          </div>
          <div class="one_name">
            <span></span>
            <span>浮动盈亏</span>
            <span>|</span>
          </div>
          <div class="one_name">
            <span></span>
            <span>保证金</span>
            <span>|</span>
          </div>
          <div class="one_name">
            <span></span>
            <span>手续费</span>
            <span>|</span>
          </div>
        </div>
        <div class="name_chi1" v-for="(item, index) in positions" :key="index">
          <div class="one_name1">
            <span>|</span>
            <span>{{ item.symbol_cn }}</span>
            <span>|</span>
          </div>
          <div class="one_name1" style="width: 8rem;">
            <span></span>
            <span>{{ item.code }}</span>
            <span>|</span>
          </div>
          <div class="one_name1" style="width: 10rem;">
            <span></span>
            <span>{{ item.created_at }}</span>
            <span>|</span>
          </div>
          <div class="one_name1">
            <span></span>
            <span>{{ parseFloat(item.volume).toFixed(0) }}</span>
            <span>|</span>
          </div>
          <div class="one_name1">
            <span></span>
            <span>{{ item.rise_fall == 'RISE' ? '买' : '卖' }}</span>
            <span>|</span>
          </div>
          <!-- <div class="one_name1">
              <span></span>
              <span>{{ item.volume }}</span>
              <span>|</span>
            </div> -->
          <div class="one_name1">
            <span></span>
            <span>{{ parseFloat(item.open_price).toFixed(2) }}</span>
            <span>|</span>
          </div>
          <div class="one_name1">
            <span></span>
            <span>
              {{
                item.rise_fall == 'RISE'
                  ? (
                      (parseFloat(ticket[item.code] && ticket[item.code]['price']).toFixed(2) - parseFloat(item.open_price)).toFixed(2) *
                      parseFloat(optionlist[item.code] && optionlist[item.code]['unit_price']).toFixed(2) *
                      parseFloat(item.volume).toFixed(2)
                    ).toFixed(2)
                  : (
                      (parseFloat(item.open_price).toFixed(2) - parseFloat(ticket[item.code] && ticket[item.code]['price']).toFixed(2)) *
                      parseFloat(optionlist[item.code] && optionlist[item.code]['unit_price']).toFixed(2) *
                      parseFloat(item.volume).toFixed(2)
                    ).toFixed(2)
              }}
            </span>
            <span>|</span>
          </div>
          <div class="one_name1">
            <span></span>
            <span>{{ item.deposit }}</span>
            <span>|</span>
          </div>
          <div class="one_name1">
            <span></span>
            <span>{{ item.service_fee }}</span>
            <span>|</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */,
    optionlist: state => state.trade.optionlist /* 全部合约代码 */
  }),
  name: 'query',
  data() {
    return {
      capital: [], //资金明细
      positions: [], //持仓明细
      settlementlist: [], //持仓明细
      capitaltime: [],
      isstatu: '',
      timesin1: '',
      disstatus: 1,
      time: {
        time: '',
        times: ''
      },
      status: [
        {
          title: '资金状态',
          id: '1'
        },
        {
          title: '结算单',
          id: '2'
        }
        // {
        //   title: '持仓明细',
        //   id: '3'
        // }
      ],
      order_list_condition: [] //条件单、委托
    };
  },
  mounted() {
    this.getDatatime();
    this.query();
  },
  methods: {
    onstatu(item, index) {
      var that = this;
      that.isstatu = index;
      if (item.id == '1') {
        that.disstatus = 1;
        this.query();
      } else if (item.id == '2') {
        that.disstatus = 2;
        this.getDatatime();
      } else if (item.id == '3') {
        that.disstatus = 3;
        this.query3();
      }
    },
    //获取资金详情
    query() {
      this.$get('addons/tf-futures/member/my-info').then(res => {
        if (res.code == 200) {
          // if (res.data.length == 0) {
          //   this.$notify.error('暂无信息！');
          // }
          this.capital = res.data;
          setTimeout(() => {
            this.query();
          }, 1500);
        } else {
          // this.$notify.error('暂无信息！');
          console.log(res.message || '暂无信息');
        }
      });
    },
    //查询结算
    query2() {
      this.$get('addons/tf-futures/order/counts', this.time).then(res => {
        if (res.code == 200) {
          // if (res.data.length == 0) {
          //   this.$notify.error('暂无信息！');
          // }
          this.settlementlist = res.data;
        } else {
          // this.$notify.error('暂无信息！');
          console.log(res.message || '暂无信息');
        }
      });
    },
    //获取持仓明细
    query3() {
      this.$get('addons/tf-futures/order-reason/total').then(res => {
        if (res.code == 200) {
          // if (res.data.length == 0) {
          //   this.$notify.error('暂无信息！');
          // }
          this.positions = res.data;
        } else {
          // this.$notify.error('暂无信息！');
          console.log(res.message || '暂无信息');
        }
      });
    },
    //获取当前年月日
    getDatatime() {
      var that = this;
      var time = new Date();
      that.capitaltime = time.toLocaleDateString();
      this.query2();
    }
  }
};
</script>

<style scoped>
.title_red {
  color: #fe2424;
}

.title_green {
  color: #007f00;
}

.title_blue {
  color: #0000ff;
}

/*查询*/
.tabcheck {
  width: 100%;
  height: 25px;
  display: flex;
  justify-content: flex-start;
}

.tabone {
  width: 65px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to bottom, #f2f2f2, #ebebeb, #cfcfcf);
  border-top: #898c95 solid 1px;
  border-right: #898c95 solid 1px;
  border-bottom: #898c95 solid 1px;
}

.tabsta {
  width: 65px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-top: #898c95 solid 1px;
  border-right: #898c95 solid 1px;
  border-left: #898c95 solid 1px;
}

.tatuleft {
  width: 100%;
  height: calc(100% - 25px);
  box-sizing: border-box;
  padding-bottom: 10px;
  border: #898c95 solid 1px;
}
/* 资金状态盒子 */
.tatu_rig {
  width: 100%;
  height: 100%;
  overflow: auto;
}
/* 结算单查询部分 */
.tatu_le {
  float: left;
  width: 224px;
  height: 100%;
}
/* 结算单右侧显示部分x轴滚动 */
.tatu_riin {
  float: left;
  width: calc(100% - 225px);
  height: 100%;
  overflow-y: hidden;
  overflow-x: auto;
}

/* 结算单头部 */
.chi_title {
  width: 100%;
  height: 50px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 结算单表格内容盒子 y轴滚动*/
.js_border {
  width: 200%;
  height: calc(100% - 50px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: 10px;
}
/* 结算单内容th */
.name_chi {
  width: 100%;
  height: 35px;
  border-top: #000000 dashed 1px;
  border-bottom: #000000 dashed 1px;
}
/* 结算单表格内容td */
.name_chi1 {
  width: 100%;
  height: 35px;
  border-bottom: #000000 dashed 1px;
}
/* 结算单th的小部分 */
.one_name {
  width: 96px;
  height: 35px;
  font-size: 14px;
  font-weight: 600;
  float: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 结算单td的 */
.one_name1 {
  width: 96px;
  height: 35px;
  float: left;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chadiv {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 11.2px;
}

.cha_tit {
  margin-left: 8px;
}

.cha_inp {
  width: 128px;
  margin-left: 16px;
}

.but_check {
  width: 64px;
  height: 20px;
  background-image: linear-gradient(to bottom, #fbfbfb, #f7f7f7, #f3f3f3);
  border: #003c74 solid 1px;
  border-radius: 3px;
  margin-top: 56px;
  margin-left: 16px;
}
/* 资金状态头部 */
.Company {
  font-size: 16px;
  font-weight: 600;
  width: 240px;
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  margin-left: 16px;
}
/* 资金状态内容 */
.con_open {
  display: flex;
  justify-content: flex-start;
}

.con_div {
  width: 256px;
  margin-top: 27px;
  margin-left: 16px;
}

.con_dis_one {
  width: 240px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}



/*持仓*/
.activess {
  background-color: #3399ff;
  color: #ffffff;
}

/*参数设置*/
.aletborder_div {
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.aletborder {
  width: 500px;
  height: 400px;
  position: absolute;
  background: #c5d3e1;
  top: 25%;
  left: 35%;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 0 10px;
}

.aletborder .alert_titile {
  width: 100%;
  height: 30px;
  overflow: hidden;
  line-height: 30px;
  color: #000000;
}

.aletborder .info_btn {
  padding: 5px 17px;
  float: right;
  margin-top: 10px;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #000000;
}

.aletborder .alert_info .info_title {
  width: 120px;
  height: 20px;
  background: #fff;
  border-radius: 3px;
  text-align: center;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
}

.aletborder .alert_info .table_border {
  background: #fff;
  width: 100%;
  height: 300px;
  border: 1px solid #000000;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 10px;
}

.aletborder .title_text {
  width: 50%;
  height: 30px;
  float: left;
}

.aletborder .title_btn {
  width: 40%;
  height: 30px;
  float: right;
  display: flex;
  justify-content: flex-end;
}
</style>
